<template>
    <div class="main">
      <p  class="main_text">操作日志管理</p>
        <!-- #################################### 表单 #################################### -->
        <div class="cyr-flex">
            <el-button type="danger" plain @click="DelAll" style="width: fit-content">批量删除</el-button>
            <el-table @selection-change="handleSelectionChange" :data="tableData" class="mt20"
               :header-cell-style="{ 'background': '#f0f6fe' }"  :show-overflow-tooltip="true" v-adaptive border>
                <el-table-column type="selection" width="50" />
                <el-table-column label="操作人" prop="name" width="100" />
                <el-table-column label="操作时间" prop="operate_date" />
                <el-table-column label="操作模块" prop="operation_modul" />
                <el-table-column label="操作类型" prop="operate_type">
                    <!-- C-创建   U-更新  R-查找  D-删除 -->
                    <template #default="props">
                        <el-tag type="success" v-if="props.row.operate_type == 'C'">创建</el-tag>
                        <el-tag type="info" v-else-if="props.row.operate_type == 'U'">更新</el-tag>
                        <el-tag type="warning" v-else-if="props.row.operate_type == 'R'">查找</el-tag>
                        <el-tag type="danger" v-else>删除</el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="描述" prop="remark" /> -->
                <el-table-column label="操作结果" prop="operate_result" />
                <el-table-column label="操作" fixed="right" width="120">

                    <template #default="props">
                        <el-popconfirm title="你确定要删除吗？" @confirm="DelOnly(props.row.id)">
                            <template #reference>
                                <el-button size="small" link type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
                @change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { RequestOperationLogDel, RequestOperationDeleteList, RequestOperationLogGetlistlimit } from "@/api/path/index.js";
import { ElMessage } from 'element-plus'
import { formatTime } from "../../../filters/index";
import { ref } from 'vue';
const inquireData = ref<any>({
    value1: '',
    resource: '',
    name: ''
})

/* *********************************** 分页获取数据 *********************************** */
const total = ref<any>(0)
const currentPage = ref<any>(1)
const pageSize = ref<any>(10)
const handleSizeChange = (val: number) => {
    getData()
}
const handleCurrentChange = (val: number) => {
    getData()
}
const tableData = ref<any>([])
const getData = () => {
    RequestOperationLogGetlistlimit({
        page: currentPage.value,
        rows: pageSize.value,
    }).then((res: any) => {
        res.resultObj.data.forEach((item: any) => {
            item.operate_date = formatTime(item.operate_date)
        });
        console.log(res.resultObj);
        tableData.value = res.resultObj.data
        total.value = res.resultObj.total
    })
}
getData()

/* 删除单个 */
const DelOnly = (id: any) => {
    RequestOperationLogDel(id).then((res: any) => {
        ElMessage.success(res.msg)
        getData()
    })
}
/* 批量删除 */
const ids = ref<any>([])
const handleSelectionChange = (val: any) => {
    val.forEach((item: any) => ids.value.push(item.id));
}
const DelAll = () => {
    const formimgs = new FormData()
    formimgs.append('ids', ids.value)
    RequestOperationDeleteList(formimgs).then((res: any) => {
        ElMessage.success(res.msg)
        getData()
    })
}
</script>




<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }
}
</style>
